@import helper._
@import com.example.auction.item.api.ItemStatus
@import com.example.auction.search.api.SearchItem
@import com.example.auction.pagination.PaginatedSequence
@import routes.ItemController.getItem
@import java.util.Optional
@import controllers.Currency
@import controllers.{Currency => Currencies}

@(showInlineInstruction: Boolean, searchItemForm: Form[SearchItemForm], results: Optional[PaginatedSequence[SearchItem]])(implicit nav: Nav)

@main(message("searchItems")) {

    <h2>@message("searchItems")</h2>

    @if(showInlineInstruction == true) {
        <p>@message("instruction.search")</p>

        <p>@Html(message("instruction.enableSearch", "<a href=\"https://github.com/lagom/online-auction-java/blob/master/README.md\">README.md</a>"))</p>
    }

    @foundationForm(searchItemForm, routes.SearchController.search(), 'id -> "searchForm") {
        <div class="column row">
            @inputText(searchItemForm("keywords"), 'placeholder -> "laptop")
        </div>
        <div class="column row">
            @inputText(searchItemForm("maximumPrice"), 'type -> "number", 'min -> 0)
            @select(
                field = searchItemForm("maximumPriceCurrency"),
                options = Currencies.values().toSeq.map(c => c.name() -> c.getDisplayName).sortBy(_._2)
            )
        </div>
        <input type="submit" class="button" value="@message("search")"/>

        <input type="hidden" id="pageNumber" value="@searchItemForm("pageNumber").value" name="@searchItemForm("pageNumber").name"/>

        @if(results.isPresent) {
            <script>
                var updatePage = function(pageNum){
                    document.getElementById("pageNumber").value = pageNum;
                    document.getElementById("searchForm").submit();
                }
            </script>
            @if(results.get().getPageSize < results.get.getCount) {
                <div>@message("searchFoundCountWithPagination", results.get().getPageSize, results.get.getCount)</div>
            } else {
                <div>@message("searchFoundCount", results.get.getCount)</div>
            }
            <table>

            <thead>
                <tr>
                    <th>@message("title")</th>
                    <th>@message("status")</th>
                    <th>@message("currentPrice")</th>
                </tr>
            </thead>

                <tbody>
                @for(item <- results.get.getItems) {
                    @defining(Currency.valueOf(item.getCurrencyId)) { currency =>
                        <tr>
                            <td>
                                <a href="@getItem(item.getId.toString)">@item.getTitle</a>
                            </td>
                            <td>@item.getItemStatus</td>
                            <td>
                            @if(
                                item.getItemStatus.equals(ItemStatus.AUCTION.name)
                                        && item.getPrice.isPresent
                                        && item.getPrice.get > 0) {
                                @currency.format(item.getPrice.get)
                            } else {
                                -
                            }
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4">@item.getDescription</td>
                        </tr>
                    }
                }
                </tbody>
            </table>
            @paginate(results.get){ (pageNumber, label) =>
                    <a onclick='updatePage(@pageNumber);' aria-label='@label'>@label</a>
            }
        }

    }
}
